<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>帖子</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="/favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/homepage/post.css">
    <link rel="stylesheet" href="/css/homepage/comment.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
    <style type="text/css">
        .infinite-scroll-preloader {
            margin-top: -20px;
        }

        .swiper-slide img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="page">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left" href="javascript:history.back(-1)"
                data-transition='slide-out'>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">帖子</h1>
            <a class="button button-link button-nav pull-right" href="/addexam/<%=list.id%>/detail "
                data-transition='slide-out'>
                <!-- <span class="icon icon-right"></span> -->
                评测
            </a>
        </header>
        <nav class="bar bar-tab">
            <input type="text" id="myComment" class="pinglun" placeholder="评论一下吧！">
            <a onclick="sendMyComment()" class="goPinglun">评论</a>
        </nav>

        <div class="content pull-to-refresh-content infinite-scroll" data-distance="100">
            <!-- 默认的下拉刷新层 -->
            <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
            </div>
            <!-- 这里是页面内容区 -->
            <!-- 帖子图片轮播 -->
            <div class="swiper-container" data-space-between='10'>
                <div class="swiper-wrapper">
                    <%for(var i=0;i<list.pics.length;i++){%>
                    <div class="swiper-slide"><img src="../../../<%=list.pics[i]%>" alt=""></div>
                    <%}%> 
                    <!-- <div class="swiper-slide"><img
                            src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1n3rZHFXXXXX9XFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                            alt=""></div>
                    <div class="swiper-slide"><img
                            src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i4/TB10rkPGVXXXXXGapXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                            alt=""></div>
                    <div class="swiper-slide"><img
                            src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i1/TB1kQI3HpXXXXbSXFXXXXXXXXXX_!!0-item_pic.jpg_320x320q60.jpg"
                            alt=""></div> -->
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 帖子标题 -->
            <div id="postTitle"><%=list.postTitle%></div>
                <div class="postInformation">
                    <div class="poster">
                        <div class="posterImg">
                            <img src="<%=list.userPic%>" alt="">
                        </div>
                        <p class="posterName">
                            <%=list.userName%>
                        </p>
                    </div>
                    <div class="like">
                        <div class="likeContainer">
                            <i class="iconfont icon-like-1"></i>
                            <span class="likeNumber">关注</span>
                        </div>
                    </div>
                </div>
                <!-- 帖子内容 -->
                <div id="postContainer"><%=list.postData%></div>

                <!-- 帖子回复 -->
                <div class="commentAll">
                    <!--回复区域 begin-->
                    <div class="comment-show">
                        <!-- <div class="comment-show-con clearfix">
                            <div class="comment-show-con-img pull-left"><img
                                    src="https://www.jsdaima.com/Uploads/js/201705/1495781184/header-img-comment_03.png"
                                    alt=""></div>
                            <div class="comment-show-con-list pull-left clearfix">
                                <div class="pl-text clearfix">
                                    <a href="#" class="comment-size-name">名称 : </a>
                                    <span class="my-pl-con">评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容</span>
                                </div>
                                <div class="date-dz">
                                    <span class="date-dz-left pull-left comment-time">2017-5-2</span>
                                    <div class="date-dz-right pull-right comment-pl-block">
                                        <a href="javascript:;" class="removeBlock">删除</a>
                                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                                        <span class="pull-left date-dz-line">|</span>
                                        <a href="javascript:;" class="date-dz-z pull-left"><i
                                                class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
                                    </div>
                                    <div class="hf-con pull-left">
                                        <div class="flex-text-wrap">
                                            <pre class="pre" style="padding: 6px 15px;"><span></span><br></pre><textarea
                                                class="content comment-input hf-input" placeholder=""
                                                onkeyup="keyUP(this)"></textarea></div> <a href="javascript:;"
                                            class="hf-pl">评论</a>
                                    </div>
                                </div>
                                <div class="comment-show-con clearfix" style="padding: 0;">
                                    <div class="comment-show-con-img pull-left" style="width: 25px;height: 25px;">
                                        <img style="width: 100%;height: 25px;"
                                            src="https://www.jsdaima.com/Uploads/js/201705/1495781184/header-img-comment_03.png"
                                            alt=""></div>
                                    <div class="comment-show-con-list pull-left clearfix">
                                        <div class="pl-text clearfix">
                                            <a href="#" class="comment-size-name">名称 : </a>
                                            <span class="my-pl-con">评论内容评论内容评论内容评论内容评论内容评论内容评论内容</span>
                                        </div>
                                        <div class="date-dz">
                                            <span class="date-dz-left pull-left comment-time">2017-5-2</span>
                                            <div class="date-dz-right pull-right comment-pl-block"
                                                style="padding-right: 0;">
                                                <a href="javascript:;" class="removeBlock">删除</a>
                                                <span class="pull-left date-dz-line">|</span>
                                                <a href="javascript:;" class="date-dz-z pull-left"><i
                                                        class="date-dz-z-click-red"></i>赞 (<i class="z-num">666</i>)</a>
                                            </div>

                                        </div>
                                        <div class="hf-list-con"></div>
                                    </div>
                                </div>
                                <div class="hf-list-con"></div>
                            </div> 
                        </div>-->
                    </div>
                    <!--回复区域 end-->

                </div>
            </div>
        </div>

        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'
            charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
            charset='utf-8'></script>
        <script type='text/javascript'>

            $.init()
            // 下拉刷新js
            // 添加'refresh'监听器
            $(document).on('refresh', '.pull-to-refresh-content', function (e) {
                // 模拟2s的加载过程
                setTimeout(function () {
                    var cardNumber = $(e.target).find('.card').length + 1;
                    var cardHTML = '<div class="card">' +
                        '<div class="card-header">card' + cardNumber + '</div>' +
                        '<div class="card-content">' +
                        '<div class="card-content-inner">' +
                        '这里是第' + cardNumber + '个card，下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                        '</div>' +
                        '</div>' +
                        '</div>';

                    $(e.target).find('.card-container').prepend(cardHTML);
                    // 加载完毕需要重置
                    $.pullToRefreshDone('.pull-to-refresh-content');
                }, 2000);
            });

            var commentNum = 0

            function addItems(data) {
                // 生成新条目的HTML
                // console.log(data)
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += `
                    <div class="comment-show-con clearfix">
                            <div class="comment-show-con-img pull-left"><img
                                    src="${data[i].headJpg}"
                                    alt=""></div>
                            <div class="comment-show-con-list pull-left clearfix"  id="Comment${data[i].commentId}">
                                <div class="pl-text clearfix">
                                    <a href="#" class="comment-size-name">${data[i].userName} : </a>
                                    <span class="my-pl-con">${data[i].commentData}</span>
                                </div>
                                <div class="date-dz" id="huifuComment${data[i].commentId}">
                                    <span class="date-dz-left pull-left comment-time">${data[i].commentDate}</span>
                                    <div class="date-dz-right pull-right comment-pl-block">
                                        <a onclick="getTwoComment(this)" data-commentId="${data[i].commentId}" class="removeBlock">查看回复</a>
                                        <a href="javascript:;" data-commentId="${data[i].commentId}" class="removeBlock">删除</a>
                                        <a onclick="pinglun(this)" data-commentId="${data[i].commentId}" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
                                        <span class="pull-left date-dz-line">|</span>
                                        <a href="javascript:;" class="date-dz-z pull-left"><i
                                                class="date-dz-z-click-red"></i>赞 (<i class="z-num">${data[i].fansNumber}</i>)</a>
                                    </div>
                                    
                                </div>
                                
                                <div class="hf-list-con"></div>
                            </div>
                        </div>
                    `

                }
                // 添加新条目
                $('.comment-show').append(html);

            }

            function addTowCom(data, commentId) {
                // 生成新条目的HTML
                // console.log(data)
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    html += `
                    <div class="comment-show-con clearfix" style="padding: 0;">
                        <div class="comment-show-con-img pull-left" style="width: 25px;height: 25px;">
                            <img style="width: 100%;height: 25px;"
                                src="${data[i].commentHead}"
                                alt=""></div>
                        <div class="comment-show-con-list pull-left clearfix">
                            <div class="pl-text clearfix">
                                <a href="#" class="comment-size-name">${data[i].commentName} :  </a>
                                <span class="my-pl-con">${data[i].commentData}</span>
                            </div>
                            <div class="date-dz">
                                <span class="date-dz-left pull-left comment-time">${data[i].commentDate}</span>
                                <div class="date-dz-right pull-right comment-pl-block"
                                    style="padding-right: 0;">
                                    <a href="javascript:;" class="removeBlock">删除</a>
                                    <span class="pull-left date-dz-line">|</span>
                                    <a href="javascript:;" class="date-dz-z pull-left"><i
                                            class="date-dz-z-click-red"></i>赞 (<i class="z-num">${data[i].fansNumber}</i>)</a>
                                </div>

                            </div>
                            <div class="hf-list-con"></div>
                        </div>
                    </div>
                    `

                }
                // 添加新条目
                $('#Comment' + commentId).append(html);

            }

            function chakanhuifu(obj) {
                const commentId = obj.dataset.commentid;
                $.ajax({
                    type: 'get',
                    url: '/post/getComment',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                        if (data.err == 0) {
                            console.log(data)
                            addTowCom(data.data, commentId)
                        } else {
                            $.alert(data.msg);
                        }
                    }
                })
            }

            var pinglunOK = false

            function pinglun(obj) {
                console.log(obj)
                if ($(obj).html() == '回复') {
                    const commentId = obj.dataset.commentid;
                    console.log(commentId)
                    const html = `
                    <div class="hf-con pull-left">
                        <div class="flex-text-wrap">
                            <pre class="pre" style="padding: 6px 15px;"><span></span><br></pre><textarea
                                class="content comment-input hf-input" id="twoComment${commentId}" placeholder=""
                                onkeyup="keyUP(this)"></textarea></div> <a data-commentId="${commentId}" onclick="sendTwoComment(this)"
                            class="hf-pl">评论</a>
                    </div>
                `
                    $(obj).html('点击取消')
                    $('#huifuComment' + commentId).append(html);


                } else if ($(obj).html() == '点击取消') {
                    $('.hf-con').remove()
                    $(obj).html('回复')
                }
            }



            getComment()
            function getComment() {
                $.ajax({
                    type: 'get',
                    url: '/post/getComment',
                    dataType: 'json',
                    success: function (data) {
                        // console.log(data)
                        if (data.err == 0) {
                            // console.log(data)
                            addItems(data.data)
                        } else {
                            $.alert(data.msg);
                        }
                    }
                })
            }

            function getTwoComment(obj) {
                $(obj).remove();
                const commentId = obj.dataset.commentid;
                console.log(commentId)
                $.ajax({
                    type: 'post',
                    url: '/post/getTwoComment',
                    data: {
                        commentId: commentId
                    },
                    dataType: 'json',
                    success: function (data) {
                        // console.log(data)
                        if (data.err == 0) {
                            console.log(data)
                            addTowCom(data.data, commentId)
                        } else {
                            $.alert(data.msg);
                        }
                    }
                })
            }

            function sendMyComment() {
                const comment = document.getElementById('myComment').value
                console.log(comment)

                if (comment === '') {
                    $.alert('你没有填写评论呀！');
                } else {
                    $.ajax({
                        type: 'post',
                        url: '/post/sendMyComment',
                        data: {
                            commentData: comment
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data)
                            if (data.err == 0) {
                                console.log(data)
                            } else {
                                $.alert(data.msg);
                            }
                        }
                    })
                }

            }

            function sendTwoComment(obj) {
                const comId = obj.dataset.commentid
                const commentData = document.getElementById('twoComment' + comId).value

                if (commentData === '') {
                    $.alert('你没有填写评论呀！');
                } else {
                    $.ajax({
                        type: 'post',
                        url: '/post/sendTwoComment',
                        data: {
                            CommentId: comId,
                            commentData: commentData
                        },
                        dataType: 'json',
                        success: function (data) {
                            console.log(data)
                            if (data.err == 0) {
                                console.log(data)
                            } else {
                                $.alert(data.msg);
                            }
                        }
                    })
                }

            }
        </script>
</body>

</html>